/**
 * 首页图标 - leo
 */
import React, { Component } from 'react';
import { Flex } from 'antd-mobile-rn';
import {
  StyleSheet, Text, Image, View, TouchableOpacity
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/FontAwesome';
import Icon2 from 'react-native-vector-icons/Feather';
import os from '../utils/os';

/**
 *
 * @param {string} logoUrl - logo 地址
 * @param {string} name - 名称
 * @param {function} logout - 退出
 * @param {setUp} setUp - 设置
 */
export default class HomeHeader extends Component {
  render() {
    const {
      logout, setUp, logoUrl, name, about
    } = this.props;
    return (
      <LinearGradient
        start={{ x: 1, y: 0 }}
        end={{ x: 0.1, y: 0.65 }}
        colors={['#46bfdd', '#1a77be']}
        style={styles.container}
      >
        <Text style={styles.logoutButton} onPress={() => logout()}>
          {/* <Svg icon="back" size="20" color="#fff" /> */}
          <Icon name="chevron-left" size={20} color="#fff" />
        </Text>
        <Text style={styles.cogButton} onPress={() => setUp()}>
          {/* <Svg icon="more" size="20" color="#fff" /> */}
          <Icon2 name="settings" size={20} color="#fff" />
        </Text>
        <Flex direction="column">
          <TouchableOpacity onPress={() => about()}>
            <View style={[styles.logoImageWrap]}>
              <Image source={{ uri: logoUrl || '/' }} style={styles.logoImage} />
            </View>
          </TouchableOpacity>
          <Text style={styles.nameText}>{name}</Text>
        </Flex>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: SCALE(400)
  },
  backgroundImage: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: null,
    height: null,
    // 不加这句，就是按照屏幕高度自适应
    // 加上这几，就是按照屏幕自适应
    // resizeMode:Image.resizeMode.contain,
    // 祛除内部元素的白色背景
    backgroundColor: 'rgba(0,0,0,0)'
  },
  logoutButton: {
    position: 'absolute',
    left: 10,
    top: os === 'ios' ? 40 : 20,
    zIndex: 1
  },
  cogButton: {
    position: 'absolute',
    right: 10,
    top: os === 'ios' ? 40 : 20,
    zIndex: 1
  },
  logoImageWrap: {
    width: SCALE(144),
    height: SCALE(144),
    marginTop: SCALE(140),
    marginBottom: SCALE(34),
    borderRadius: SCALE(72),
    overflow: 'hidden'
  },
  logoImage: {
    width: SCALE(144),
    height: SCALE(144),
    backgroundColor: '#fff',
  },
  nameText: {
    marginBottom: SCALE(40),
    color: '#fff',
    fontSize: 18
  }
});
